$input-padding-y: 0.375rem; //переменна переопределена после удаления bootstrap
$input-border-width: 1px; //переменна переопределена после удаления bootstrap

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: $space-x6;
  width: 100%;

  &:focus,
  &:active,
  &:hover {
    outline: none;
  }

  .input-for-search {
    position: relative;
  }

  .search-icon-position {
    position: absolute;
    right: $space-x3;
    bottom: $space-x2;
  }
}

.feedback {
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.2px;
  padding-top: $space-x2;
  color: $gray-900;

  &.invalid {
    color: $danger;
  }

  &.valid {
    color: $success;
  }
}

.form-feedback {
  font-size: 14px;
  line-height: 150%;
}

.form-feedback-invalid {
  color: $danger;
}

.form-feedback-valid {
  color: $success;
}

.help-text {
  font-size: 13px;
  line-height: 16px;
  margin: $space-x1 0 0;
  color: $gray-700;

  &.rounded {
    margin: $space-x1 $space-x4 0;
  }
}

.label-size {
  font-size: 13px;
  line-height: 16px;
  color: $gray-700;
  margin-bottom: $space-x2;

  &:focus {
    outline: none;
  }

  &.label-space {
    margin-left: $space-x4;
  }

  &.horizontal-label-space {
    @include media-down-breakpoint(sm) {
      margin-left: $space-x4;
    }
  }

  &.text-area-label {
    padding-top: 5px;
  }
}

.input,
.textarea,
.input-select__control {
  padding: $space-x2 $space-x3;
  width: 100%;
  border-radius: $space-x1;
  border: $borderPrimary;
  background-color: $white;
  color: $gray-900;
  font-weight: 400;
  transition: all $animation-duration;
  resize: none;
  font-size: 16px;
  line-height: 24px;
  min-height: 0;
  height: $space-x10;
  cursor: pointer;

  &::placeholder {
    font-weight: 400;
    color: $gray-600;
  }

  &.with-icon {
    padding-right: $space-x8 !important;
  }

  &:focus {
    outline: none;
    border: 1px solid $indigo;
  }

  &:active,
  &:hover {
    outline: none;
    border: 1px solid $gray-500;
    background-color: $white;
  }

  &:disabled {
    background-color: $gray-100;
    border-color: $gray-100;
    color: $gray-500;
    cursor: default;

    &:focus,
    &:active,
    &:hover {
      outline: none;
      box-shadow: none;
      border-color: $gray-100;
    }
  }

  &.sm {
    font-size: 14px;
    line-height: 16px;
    height: $space-x8;
  }

  .input-select__indicator {
    padding: 0;
    color: $gray-500;

    &:hover {
      color: $gray-600;
    }
  }

  &.valid,
  &.round {
    &.valid {
      background-color: rgba($success, 0.1);
      border: 1px solid rgba($success, 0);

      &:hover,
      &:focus,
      &:active {
        background-color: $white;
        border: 1px solid rgba($success, 0.5);
      }
    }
  }

  &.invalid,
  &.round {
    &.invalid {
      background-color: rgba($danger, 0.1);
      border: 1px solid rgba($danger, 0);

      &:hover,
      &:focus,
      &:active {
        background-color: $white;
        border: 1px solid rgba($danger, 0.5);
      }
    }
  }

  &.round {
    border: 1px solid $gray-250;
    background-color: $gray-100;

    &:focus,
    &:active,
    &:hover {
      border: 1px solid $gray-250;
      background-color: $white;
    }

    &:disabled {
      background-color: $gray-100;
      border-color: $gray-100;
      color: $gray-500;

      &:focus,
      &:active,
      &:hover {
        outline: none;
        box-shadow: none;
        border-color: $gray-100;
      }
    }
  }
}

.round {
  border-radius: $space-x5;
}

// InputSelect

.round {
  .input-select__control,
  .input-select__menu-list {
    border-radius: $space-x5;
  }

  .input-select__control,
  .input-select__option {
    padding: $space-x2 $space-x4;
  }
}

.select {
  outline: none;

  &.sm {
    height: 32px;

    .input-select__control {
      height: $space-x8;
    }

    .input-select__control,
    .input-select__option {
      padding: $space-x2 $space-x3;
      line-height: 16px;
      font-size: 14px;
      min-height: $space-x6;
    }
  }

  .input-select__control {
    border: $borderPrimary;
    background-color: $white;

    &:focus {
      border: 1px solid $indigo;
    }

    &:hover,
    &:active {
      border-color: $gray-500;
    }
  }

  .input-select__control--is-disabled,
  .input-select--is-disabled {
    border-color: $gray-100;
    background-color: $gray-100;
  }

  .input-select__placeholder {
    color: $gray-600;
    z-index: 0;
  }

  .input-select__single-value {
    color: $gray-900;
  }

  .input-select__single-value--is-disabled {
    color: $gray-500;
  }

  .input-select__control--is-focused {
    outline: none;
    border: 1px solid $indigo;
    box-shadow: none;
  }

  .input-select__menu {
    margin: 0 0 $space-x2;
    z-index: 1001;
    border: none;
    outline: none;
    box-shadow: none;
    border-radius: $space-x1;
  }

  .input-select__menu-list {
    padding: 0;
    border-radius: $space-x1;
    box-shadow: $dropshadow-16;
    z-index: 1000;
    max-height: 288px;
    overflow: auto;

    &::-webkit-scrollbar {
      width: $space-x1;
      border-radius: $space-x4;
    }

    &::-webkit-scrollbar-thumb {
      background-color: $lightSapphire;
      border-radius: $space-x4;
    }
  }

  &.round {
    .input-select__menu-list {
      border-radius: $space-x4;

      &::-webkit-scrollbar-button {
        height: $i-space-x5;
      }
    }

    .input-select__control {
      border: 1px solid $gray-250;
      background-color: $gray-100;

      &:hover,
      &:focus,
      &:active {
        background-color: $white;
      }
    }

    .input-select__control--is-focused {
      outline: none;
      border-color: $gray-250;
      box-shadow: none;
      background-color: $white;
    }

    .input-select__control--is-disabled,
    .input-select--is-disabled {
      border-color: $gray-100;
      background-color: $gray-100;
    }
  }

  .input-select__option {
    padding: $space-x2 $space-x4;
    color: $gray-900;
    border: none;
    outline: none;

    &:last-child {
      border-bottom: none;
    }
  }

  .input-select__option--is-focused {
    background-color: $gray-100;
  }

  .input-select__option:active {
    background-color: $gray-200;
  }

  .input-select__option--is-selected {
    background-color: $gray-200;
  }
}

.sm {
  .input-select__value-container {
    line-height: 16px;
  }
}

.input-select__value-container {
  line-height: 24px;
  padding: 0 $space-x2 0 0 !important;

  > div {
    padding: 0;
    margin: 0;
  }

  div:last-child {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    width: 100%;
    z-index: 1000;
  }
}

.input-select__indicator {
  margin-top: -$i-space-x5;
  margin-bottom: -$i-space-x5;
}

.input-select__indicator-separator {
  display: none;
}

.input-select__input {
  width: 100%;

  input {
    width: 100% !important;
  }
}

// TextArea

.textarea {
  resize: vertical;
  outline: none;
  max-height: 18rem;

  &.sm {
    padding: calc(#{$space-x2} - 1px) $space-x3;
    min-height: $space-x8;

    &.round {
      padding: calc(#{$space-x2} - 1px) 16px;

      &::-webkit-scrollbar-button {
        height: $i-space-x7;
      }
    }
  }

  &.lg {
    padding: calc(#{$space-x2} + 1px) 12px;
    min-height: $space-x10;
    line-height: 20px;

    &.round {
      padding: calc(#{$space-x2} + 1px) 16px;

      &::-webkit-scrollbar-button {
        height: $i-space-x7;
      }
    }
  }
}

// InputHorizontal

.text-sm-right {
  text-align: end;
  width: 100%;

  @include media-down-breakpoint(sm) {
    text-align: start;
  }

  &.offset-sm {
    padding-top: 4px;

    @include media-down-breakpoint(sm) {
      padding-top: 0;
    }
  }

  &.offset-lg {
    padding-top: 8px;
  }
}

.col-form-label-horizontal {
  padding-top: 0;
  margin-top: 0;

  @include media-up-breakpoint(sm) {
    padding-top: calc(#{$input-padding-y} + #{$input-border-width});
  }
}

// InputListVertical

.input-list {
  position: relative;

  .list {
    padding-top: $space-x1;
    padding-bottom: $space-x1;
    display: none;
    position: absolute;
    top: 64px;
    width: 100%;
    z-index: 600;
    box-shadow: $dropshadow-24;
    background-color: white;
    max-height: 288px;
    border-radius: $space-x1;

    &::-webkit-scrollbar-button {
      height: $i-space-x5;
    }

    &.sm-list {
      top: 56px;
    }

    &.round-list {
      border-radius: $space-x4;
    }

    .list-item {
      padding: $space-x2;

      &:hover {
        background-color: $gray-100;
      }

      &:active {
        background-color: $gray-200;
      }
    }

    &.show {
      display: block !important;
    }
  }
}

// FileUploader

.input-drop {
  background-color: $white;
  max-width: 288px;

  .alert-message {
    font-size: 13px;
    line-height: 16px;
    color: $danger;
    margin-bottom: 0;
  }
}

.input-drop-divider {
  border-bottom: 1px solid $gray-300;
}

.input-drop-zone {
  padding: $space-x4;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px dashed $gray-400;
  border-radius: $space-x2;

  &:focus {
    outline: none;
  }

  &.active {
    background-color: $gray-100;
    border: 2px dashed $primary;
  }

  &.disabled {
    background-color: $gray-50;
    border: none;
  }

  .description {
    color: $gray-800;
    font-size: 14px;
    line-height: 20px;
    text-align: center;

    &.device {
      color: $colorLink;
      cursor: pointer;

      &:hover,
      &:focus,
      &:active {
        color: darken($colorLink, 20%);
      }
    }

    &.description-disable {
      color: $gray-500;
      cursor: default;

      &:hover,
      &:focus,
      &:active {
        color: $gray-500;
      }
    }
  }

  .format-description {
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    color: $gray-500;
  }

  .file-name {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: $space-x2 0;
    border-top: 1px solid rgba($lightSapphire, 0.26);

    &:last-child {
      color: red;
      border-bottom: 1px solid rgba($lightSapphire, 0.26);
    }

    .wrapper-name {
      display: flex;
      align-items: center;
      overflow: hidden;

      .block-error-and-name {
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .text-name {
          font-size: 13px;
          line-height: 16px;
          color: $gray-750;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-bottom: 0;
        }
      }
    }
  }
}
